With people surfing the Web on a plethora of devices these days, it’s important that your site look good on all of them. Unfortunately, the page layout that people have come to expect on a smart TV is not the same as on a smart phone. In the former, the layout tends to flow horizontally whereas mobile devices may view a page in either letter or landscape orientation. Just as browser sniffing was a largely wasted effort, so too is device sniffing. Your best bet is to design your layouts in a fluid manner so that they can adjust to the size of the screen. That layout style is known as responsive design. In today’s article will focus on the web page header. Specifically, how to get your navigation links to go from a horizontal style to a vertical one.
What Should Go in the Header?
Which page components are included in the page header will differ from site to site, but common elements include:
- a logo
- photo
- site, person, or company name
- navigation
- contact info such as a phone number or email
- slogan or quote
Many sites will place the navigation links below the main header, but we’ll include it along with the page title for this exercise. Then we’ll watch what happens to the full-size page when the viewport becomes too small for the header content to be displayed on one line.
With that in mind, here is the full page will look like:
To make the page responsive, we’ll have it automatically adjust the header elements to fit within a narrow viewport:
As you can see, the look of a mobile site differs from the full-size one in a couple of ways:
- Links are stacked vertically.
- Links are accessed via the “Trigram for Heaven” ☰ character.
Constructing the Basic Page
Unless you want to specifically target mobile devices, you can start by building your standard full-size site.
The header content is easily identified by the <header> element. It represents a container for introductory content and/or a set of navigational links. The links themselves are enclosed within an unordered list, as is commonplace these days.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>
Responsive Header Demo
</title>
</head>
<body>
<header id="header">
<div class="container">
<h1>
Header Demo
</h1>
<nav id="nav">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">History</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="content">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p>
Nulla efficitur pharetra leo. In convallis lobortis
nisl, ut pretium purus aliquam eget. Maecenas
vestibulum venenatis eros, a volutpat mi malesuada eu.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nam mollis vitae eros
quis congue. Ut eget massa semper, cursus ligula et,
euismod lacus. Sed neque metus, tristique eget
scelerisque vitae, luctus at metus. Proin vel
ullamcorper arcu. Praesent dapibus eleifend turpis et
euismod. Sed tincidunt lobortis erat, nec elementum
libero molestie sed. Phasellus eget tristique lorem.
</p>
<p>
Maecenas dictum molestie nisi, eu ornare mauris posuere
a. Proin tempus est ligula, ut varius risus faucibus
nec. Morbi ultrices leo et vulputate facilisis. Nunc
congue, leo a facilisis dictum, metus neque tempus
arcu, ac aliquet nulla mi a felis. Maecenas quis
euismod velit. Curabitur dapibus ipsum vitae
ullamcorper auctor. Nullam nec ultricies urna.
Curabitur lacinia nec ipsum a condimentum. Quisque
lacinia faucibus augue, sed efficitur enim mollis eget.
In et metus non ante interdum varius nec in sem.
</p>
</div>
</div>
</body>
</html>
Browsers should present the above markup as a plain ole vanilla page:
All appearance-related attributes should be set using CSS, ideally within a separate file:
body {
background: #6699ff;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px;
font-family: helvetica, sans-serif;
}
.content {
position: relative;
padding-top: 80px;
}
.content p {
margin-bottom: 10px;
}
#header {
z-index: 2;
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
}
#header h1 {
top: 0px;
margin: 0px;
text-transform: uppercase;
font-size: 1.2em;
}
#nav {
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
Feel free to play around with the above rules to see what effect changes have on the document layout.
You should notice immediately that it looks quite good on a desktop monitor, but not so much in a mobile browser!
Adding in the Responsiveness
The key to making your pages responsive is to include media queries in your CSS. Introduced in CSS3 media queries use the @media rule to include a block of CSS properties based on a condition. They can evaluate a couple of useful attributes that pertain to responsiveness, including the min and max width of the viewport.
For our simple demo, we’ll change the layout to fit within a viewport width of 599 pixels or less. Note that rules that are applied regardless of viewport size that are duplicated by the @media block are effectively overridden by the latter:
@media (max-width: 599px) {
#header .container {
width: 100%;
}
#header h1 {
padding-left: 3%;
}
#nav {
width: 100%;
top: 60px;
}
#nav:before {
content: '\2630';
display: block;
position: absolute;
right: 3%;
top: -50px;
line-height: 40px;
font-size: 1.4em;
cursor: pointer;
}
#nav ul {
background: #222;
width: 100%;
margin: 0px;
}
#nav ul li {
float: none;
}
#nav ul li a {
padding: 10px 3%;
line-height: 20px;
border-top: 1px solid #333;
}
}
To test out the responsiveness, gradually drag the right edge of the browser window so that the viewport becomes progressively smaller. At some point, just before the navigation links begin to overlap the site title, the layout should change to the mobile one.
Conclusion
In the good old days, all you had to worry about was making a page look good across all the major browsers. Today, there are devices of all sizes to contend with. With the popularity of wearable devices exploding, there’s bound to be even more challenges on the horizon. The one comfort is that job security seems to be assured!
